<template>
  <div>
    <el-button type="primary" size="small" @click="add">点我数组++</el-button>
    <br>
    <br>
    <br>
    <el-scrollbar tag="ul" wrapClass="ul-style" class="box">
      <li v-for="item in a" :key="item" class="item">{{ item }}</li>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "learnElScrollbars",
  data() {
    const a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    const add = () => a.push(a.length)

    return {
      a,
      add
    }
  }
}
</script>

<style scoped>
.box {
  width: 300px;
  height: 300px;
}

.item {
  background: green;
}

.item + .item {
  margin-top: 10px;
}

>>> .ul-style {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #f1f1f1;
  overflow: auto;
  position: relative;
}

>>> .ul-style::-webkit-scrollbar {
  display: none;
}
</style>
